<template>
  <section>
    <el-row v-if="attributes.length <=0">暂无样式设置</el-row>
    <el-form v-else label-width="150px">
      <el-form-item v-for="(attribute,index) in attributes" :key="index" :label="attribute.name">
        <el-row v-if="attribute.type === 'boolean'">
          <el-switch v-model="attribute.val" active-text="是" inactive-text="否" @change="changeEvent"/>
        </el-row>
        <el-row v-else-if="attribute.type === 'select'">
          <el-select v-model="attribute.val" size="mini" @change="selectEvent($event,attribute.key)" value-key="code">
            <el-option v-for="(type,index2) in showType" :key="index2" :label="type.name" :value="type"></el-option>
          </el-select>
        </el-row>
        <el-row v-else>
          <el-input size="mini" v-model="attribute.val" style="width: 150px" @input="changeEvent"></el-input>
        </el-row>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="saveAdPositionBtn">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "index",
    props:['adPosition'],
    data(){
      return {
        pageType:null,
        currAd:null,
        attributes:[],
        showType:[
          {name:'四宫格',code:4,img:''},
          {name:'五宫格',code:5,img:''},
          {name:'六宫格',code:6,img:''},
          {name:'九宫格',code:9,img:''}
        ]
      }
    },
    watch:{
      pageType(nv,ov){
        if(nv === 'ppts'){
          this.getAttributesPPT()
        }else if(nv === 'tabs'){
          this.getAttributesTabs()
        }else if(nv === 'image'){
          this.attributes=[]
        }else if(nv === 'images'){
          this.getAttributesImages()
        }else if(nv === 'featured'){
          this.getAttributesFeatured()
        }else if(nv === 'primary_images'){
          // this.getPrimary()
        }
      }
    },
    created(){
      console.log('当前广告样式',this.adPosition)
      if(this.adPosition.data.baseSet === undefined){
        Vue.set(this.adPosition.data,'baseSet',{})
      }
      this.pageType=this.adPosition.adType.code
    },
    methods: {
      getAttributesPPT(){
        this.attributes=[
          {name:'是否显示指示点',key:'indicator',val:false,type:'boolean'},
          {name:'是否自动切换',key:'autoplay',val:false,type:'boolean'},
          {name:'自动切换时间(毫秒)',key:'interval',val:5000,type:'number'},
          {name:'幻灯片高度(px)',key:'height',val:150,type:'number'},
        ]
        for(let i=0;i<this.attributes.length;i++){//ui
          let attribute=this.attributes[i]
          if(this.adPosition.data.baseSet[attribute.key] === undefined){
            this.adPosition.data.baseSet[attribute.key]=attribute.val
          }else {
            attribute.val=this.adPosition.data.baseSet[attribute.key]
          }
        }
        console.log('用来显示的————————',this.attributes)
        console.log('自己本身的————————',this.adPosition.data.baseSet)
      },
      getAttributesTabs(){
        this.attributes=[ ]
      },
      getAttributesImages(){
        this.attributes=[
          {name:'单行商品数',key:'num',val:3,type:'number'},
        ]
        this.attributes.forEach(attribute=>{
          attribute.val=this.adPosition.data.baseSet[attribute.key]
        })
      },
      getAttributesFeatured(){
        this.attributes=[
          {name:'是否分页',key:'pagination',val:false,type:'boolean'},
        ]
        this.attributes.forEach(attribute=>{
          attribute.val=this.adPosition.data.baseSet[attribute.key]
        })
      },
      getPrimary(){
        this.attributes=[
          {name:'展示',key:'show',val:4,type:'select'},
        ]
        if(this.adPosition.data.baseSet.show === undefined){
          Vue.set(this.adPosition.data.baseSet,'show',4)
        }
        this.attributes.forEach(attribute=>{
          attribute.val=this.adPosition.data.baseSet[attribute.key]
        })
      },
      selectEvent(e,key){
        console.log('选择事件————————显示相应图片预览',e)
        this.adPosition.data.baseSet[key]=e
      },
      changeEvent(e){
        console.log('改变事件————————',this.attributes)
        setTimeout(()=>{
          this.attributes.forEach(attribute=>{
            this.adPosition.data.baseSet[attribute.key]=attribute.val
          })
        },500)
      },
      saveAdPositionBtn(){
        console.log('保存样式————————',this.adPosition)
        let tmp={id:this.adPosition.id,data:this.adPosition.data}
        this.$emit('savePosition',tmp)
      }
    }
  }
</script>

<style scoped>

</style>
